<template>
    <div class="border-box" style="--border-label: 'Word文件下载';">
        <div class="border-box" style="--border-label: '下载方式'; display: flex;justify-content: center;">
            <el-button type="success" @click="exportWord">导出单个Word</el-button>
            <el-button type="success" @click="exportWordAll">导出多个Word</el-button>
            <el-button type="success" @click="exportWordOfTextarea">导出多个Word(富文本)</el-button>
        </div>
        <div class="border-box" style="--border-label: '导出单个Word内容'; display: flex;justify-content: left;">
            <div class="export-info">
                <h1>{{ exportWordData.title }}</h1>
                <div class="info-item">
                    <span>学校：</span>
                    <div class="text-right">{{ exportWordData.schoolName }}</div>
                </div>
                <div class="info-item">
                    <span>校区：</span>
                    <div class="text-right">{{ exportWordData.areaName }}</div>
                </div>
                <div class="info-item">
                    <span>年级：</span>
                    <div class="text-right">{{ exportWordData.gradeName }}</div>
                </div>
                <div class="info-item">
                    <span>班级：</span>
                    <div class="text-right">{{ exportWordData.className }}</div>
                </div>
                <div class="info-item">
                    <span>学生姓名：</span>
                    <div class="text-right">{{ exportWordData.studentName }}</div>
                </div>
                <div class="info-item">
                    <span>性别：</span>
                    <div class="text-right">{{ exportWordData.sex }}</div>
                </div>
                <div class="info-item">
                    <span>学号：</span>
                    <div class="text-right">{{ exportWordData.studentId }}</div>
                </div>
                <div class="info-item">
                    <span>报告时间：</span>
                    <div class="text-right">{{ parseTime(exportWordData.reportTime) }}</div>
                </div>
                <div class="info-item">
                    <span>报告内容：</span>
                    <div class="text-right">
                        如下
                    </div>
                </div>
                <div v-for="context in exportWordData.reportContext" :key="context.id">
                    <span>报告{{ context.id }}：</span>
                    <div class="border-box" style="--border-label: ''; ">
                        <div class="info-item">
                            <span>报告结果：</span>
                            <div class="text-right">{{ context.result }}</div>
                        </div>
                        <div class="info-item">
                            <span>报告得分：</span>
                            <div class="text-right">{{ context.score }}</div>
                        </div>
                        <div class="info-item">
                            <span>科普内容：</span>
                            <div class="text-right">{{ context.kepuContext
                            }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="border-box" style="--border-label: '导出多个Word内容'; display: flex;justify-content: left;">
            <div class="export-info" v-for="item in  exportWordAllData  " style="margin-right: 10px;">
                <h1>{{ item.title }}</h1>
                <div class="info-item">
                    <span>学校：</span>
                    <div class="text-right">{{ item.schoolName }}</div>
                </div>
                <div class="info-item">
                    <span>校区：</span>
                    <div class="text-right">{{ item.areaName }}</div>
                </div>
                <div class="info-item">
                    <span>年级：</span>
                    <div class="text-right">{{ item.gradeName }}</div>
                </div>
                <div class="info-item">
                    <span>班级：</span>
                    <div class="text-right">{{ item.className }}</div>
                </div>
                <div class="info-item">
                    <span>学生姓名：</span>
                    <div class="text-right">{{ item.studentName }}</div>
                </div>
                <div class="info-item">
                    <span>性别：</span>
                    <div class="text-right">{{ item.sex }}</div>
                </div>
                <div class="info-item">
                    <span>学号：</span>
                    <div class="text-right">{{ item.studentId }}</div>
                </div>
                <div class="info-item">
                    <span>报告时间：</span>
                    <div class="text-right">{{ parseTime(item.reportTime) }}</div>
                </div>
                <div class="info-item">
                    <span>报告内容：</span>
                    <div class="text-right">
                        如下
                    </div>
                </div>
                <div v-for="context in  item.reportContext " :key="context.id">
                    <span>报告{{ context.id }}：</span>
                    <div class="border-box" style="--border-label: ''; ">
                        <div class="info-item">
                            <span>报告结果：</span>
                            <div class="text-right">{{ context.result }}</div>
                        </div>
                        <div class="info-item">
                            <span>报告得分：</span>
                            <div class="text-right">{{ context.score }}</div>
                        </div>
                        <div class="info-item">
                            <span>科普内容：</span>
                            <div class="text-right" v-html="context.kepuContext"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            exportWordData: {
                title: '第一次测评',
                schoolName: '全通教育集团',
                areaName: '本校区',
                studentName: '林霆锋',
                studentId: '201910098109',
                sex: '男',
                gradeName: '八年级',
                className: '6班',
                reportTime: Date.now(),
                reportContext: [
                    {
                        id: 1,
                        result: '轻度',
                        score: 18,
                        scoreBetween: '20 - 30',
                        kepuContext: '<h1>科普内容Test11</h1>'
                    }
                ]
            },
            exportWordAllData: [
                {
                    title: '第一次测评',
                    schoolName: '全通教育集团',
                    areaName: '本校区',
                    studentName: '林霆锋',
                    studentId: '201910098109',
                    sex: '男',
                    gradeName: '八年级',
                    className: '6班',
                    reportTime: Date.now(),
                    reportContext: [
                        {
                            id: 1,
                            result: '轻度',
                            score: 18,
                            scoreBetween: '20 - 30',
                            kepuContext: '<p class="ql-align-center"><strong>cscs</strong></p><p class="ql-align-center"><img src=""></p>'
                        },
                        {
                            id: 2,
                            result: '中度',
                            score: 6,
                            scoreBetween: '4 - 12',
                            kepuContext: '<h1>科普内容Test22</h1>'
                        }
                    ]

                },
                {
                    title: '第一次测评',
                    schoolName: '全通教育集团',
                    areaName: '本校区',
                    studentName: '林小锋',
                    studentId: '201910098119',
                    sex: '男',
                    gradeName: '七年级',
                    className: '6班',
                    reportTime: Date.now(),
                    reportContext: [
                        {
                            id: 1,
                            result: '轻度',
                            score: 18,
                            scoreBetween: '20 - 30',
                            kepuContext: '<h1>科普内容Test33</h1>'
                        },
                        {
                            id: 2,
                            result: '中度',
                            score: 6,
                            scoreBetween: '4 - 12',
                            kepuContext: '<h1>科普内容Test44</h1>'
                        }
                    ]
                }
            ]
        }
    },
    methods: {
        parseTime(time) {
            return this.$moment(time).format('YYYY-MM-DD HH:mm:ss');
        },
        exportWordAll() {
            // 发送请求并传递需要填充的数据
            this.$axios.post('http://localhost:8888/word/exportAll', this.exportWordAllData, { responseType: 'blob' })
                .then(res => {
                    // 创建一个 URL 对象并将生成的 Word 文档作为 URL 对象的数据源
                    const url = window.URL.createObjectURL(new Blob([res.data]));
                    // 创建一个 a 标签并设置其 href 属性为 URL 对象的值，同时设置其 download 属性为文件名
                    const link = document.createElement('a');
                    link.href = url;
                    link.setAttribute('download', 'word_exports.zip');
                    // 将 a 标签添加到文档中并模拟点击 a 标签实现下载功能
                    document.body.appendChild(link);
                    link.click();
                })
                .catch(error => {
                    console.error('导出 Word 失败：', error);
                });
        },
        exportWordOfTextarea() {
            // 发送请求并传递需要填充的数据
            this.$axios.post('http://localhost:8888/word/exportWordOfTextarea', this.exportWordAllData, { responseType: 'blob' })
                .then(res => {
                    // 创建一个 URL 对象并将生成的 Word 文档作为 URL 对象的数据源
                    const url = window.URL.createObjectURL(new Blob([res.data]));
                    // 创建一个 a 标签并设置其 href 属性为 URL 对象的值，同时设置其 download 属性为文件名
                    const link = document.createElement('a');
                    link.href = url;
                    link.setAttribute('download', 'word_exports.zip');
                    // 将 a 标签添加到文档中并模拟点击 a 标签实现下载功能
                    document.body.appendChild(link);
                    link.click();
                })
                .catch(error => {
                    console.error('导出 Word 失败：', error);
                });
        },
        exportWord() {
            // 发送请求并传递需要填充的数据
            this.$axios.post('http://localhost:8888/word/export', this.exportWordData, { responseType: 'blob' })
                .then(res => {
                    // 创建一个 URL 对象并将生成的 Word 文档作为 URL 对象的数据源
                    const url = window.URL.createObjectURL(new Blob([res.data]));
                    // 创建一个 a 标签并设置其 href 属性为 URL 对象的值，同时设置其 download 属性为文件名
                    const link = document.createElement('a');
                    link.href = url;
                    link.setAttribute('download', 'example.docx');
                    // 将 a 标签添加到文档中并模拟点击 a 标签实现下载功能
                    document.body.appendChild(link);
                    link.click();
                })
                .catch(error => {
                    console.error('导出 Word 失败：', error);
                });
        }
    },
}
</script>
<style>
.export-info {
    display: flex;
    flex-direction: column;
    /* 其他样式 */
}

.export-info .info-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.export-info .info-item span {
    flex-shrink: 0;
    width: 100px;
}

.export-info .info-item .text-right {
    text-align: right;
}
</style>    